<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./axios.js"></script>
</head>

<body>
    <!--说明： 分为三个大模块是按照步骤，最开始只显示找回账号DOM，点击下一步后切换到下一个容器，上一个不显示，依次类推 -->
    <div id="one">
        <div class="title">
            <span class="active"><i>1</i>输入找回账号</span>
        </div>
        <div class="box">
            <div class="input-item">
                <label>请输入手机号：</label>
                <input type="text" id="phone">
            </div>
            <button id="oneNext">下一步</button>
        </div>
    </div>
    <!----------------------------------------------------->
    <div id="two" style="display: none;">
        <div class="title">
            <span class="active"><i>2</i>回答密保问题</span>
        </div>
        <div class="box">
            <div class="input-item">
                <label> 用户名：</label>
                <input type="text" value="" id="username">
            </div>
            <div class="input-item">
                <label> 手机号：</label>
                <input type="text" value="" id="phone">
            </div>
            <div class="input-item">
                <label>密保问题：</label>
                <input type="text" value="" id="question">
            </div>
            <div class="input-item">
                <label>密保答案：</label>
                <input type="text" id="answer">
            </div>
            <button id="twoback">上一步</button>
            <button id="taonext">下一步</button>
        </div>
    </div>
    <!----------------------------------------------------->
    <div id="three" style="display: none;">
        <div class="title">
            <span class="active"><i>3</i>重置密码</span>
        </div>
        <div class="box">
            <div class="input-item">
                <label>请输入新密码：</label>
                <input type="text" id="password">
            </div>
            <button id="threegoback">上一步</button>
            <button id="reset">立即重置</button>
        </div>
    </div>
    <script>
        //设置根路径
        axios.defaults.baseURL = 'http://124.223.14.236:3001/api'
        //获取元素
        //第一步的下一步按钮
        const oneNext = document.querySelector('#oneNext')
        oneNext.addEventListener('click', async function (e) {
            e.preventDefault()
            //输入的手机号
            const onephone = document.querySelector('#one #phone').value
            //发送请求  获取密保问题
            const { data: dataOne } = await axios.get('/user/findPwd', {
                params: {
                    phone: onephone
                }
            })
            if (dataOne.success !== true) return alert('请输入正确的手机号')
            console.log(dataOne)
            //显示第二步的页面  隐藏第一步的页面
            document.querySelector('#one').style.display = 'none'
            document.querySelector('#two').style.display = 'block'

            //将获取的数据渲染到页面
            //获取元素
            const username = document.querySelector('#username')
            const question = document.querySelector('#question')
            const twophone = document.querySelector('#two #phone')

            username.value = dataOne.data.username
            twophone.value = dataOne.data.phone
            question.value = dataOne.data.question
            //点击下一步跳转到重置密码的页面
            //获取元素
            //上一步按钮
            const twoback = document.querySelector('#twoback')
            twoback.addEventListener('click', function () {
                document.querySelector('#one').style.display = 'block'
                document.querySelector('#two').style.display = 'none'
            })
            //下一步按钮
            const taonext = document.querySelector('#taonext')
            taonext.addEventListener('click', function () {
                document.querySelector('#two').style.display = 'none'
                document.querySelector('#three').style.display = 'block'


                //保存id
                const id = `${dataOne.data.id}`
                //获取用户输入的密保答案
                const answer = document.querySelector('#answer').value

                //进入密码重置界面
                //点击上一步退回到回答密保问题界面
                //获取元素
                const threegoback = document.querySelector('#threegoback')
                threegoback.addEventListener('click', function () {
                    document.querySelector('#two').style.display = 'block'
                    document.querySelector('#three').style.display = 'none'
                })

                //获取重置按钮
                const reset = document.querySelector('#three #reset')
                reset.addEventListener('click', async function (e) {
                    e.preventDefault()

                    //获取输入的新密码
                    const password = document.querySelector('#password').value

                    // console.log(id, answer, password)
                    //发送请求
                    const { data } = await axios.post('/user/resetPwd', {
                        id,
                        password,
                        answer,
                    })
                    //提示修改密码成功
                    alert('修改成功,即将跳转到登陆')
                    //跳转到登陆页
                    location.href = '../01-loginBaseCode/login.html'
                })
            })



        })
    </script>
</body>

</html>